<template>
  <view class="main">
    <image
      class="header"
      src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/pcDsc/dsc_header.png"
      mode="scaleToFill"
    />
    <image
      class="video_icon"
      @click="playVideo"
      src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/pcDsc/video_icon.png"
      mode="scaleToFill"
    />
    <view class="dsc">
      <view class="dsc_header">会计工作小助手介绍</view>
      <view class="dsc_content">
        会计工作小助手以“让天下没有难懂的财税”为首要宗旨，致力于打造属于财税人的综合性平台，集合APP、PC端、小程序等多方面渠道，为不同使用场景提供运用方式。小竹（PC端）与会计工作小助手同步成长，历经打磨，全方位涵盖各项功能，供您使用。
      </view>

      <view class="dsc_list">
        <view class="dsc_item" v-for="(item, index) in dscList" :key="index">
          <view class="item_title">{{ item.title }}</view>
          <view class="item_subtitle">{{ item.subtitle }}</view>
          <image class="item_img" :src="item.img" mode="scaleToFill" />
        </view>
      </view>
    </view>
    <view class="dsc_footer">
      <view class="dsc_link">
        <image
          class="link_icon"
          src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/pcDsc/link_icon.png"
          mode="scaleToFill"
        />
        www.xzcs2022.com
      </view>
      <view class="copy_link" @click="copyLink">复制网址</view>
    </view>

    <!-- 视频弹窗 -->
    <u-popup :show="showVideo" @close="close" mode="center">
      <video
        class="video"
        :src="video"
        :autoplay="true"
        :show-progress="true"
        :show-mute-btn="true"
        :enable-play-gesture="true"
        object-fit="contain"
        @fullscreenchange="fullscreenchange"
      ></video>
    </u-popup>

    <!-- 完成任务弹窗 -->
    <pointsTips
      v-if="showPointsTips"
      :title="pointsObj.name"
      :points="pointsObj.amount"
    ></pointsTips>
  </view>
</template>

<script>
import { getUserAnalyze } from "@/utils/utils.js";
import { completeTask } from "@/static/js/points.js";
export default {
  data() {
    return {
      dscList: [
        {
          title: "网页登录即刻使用",
          subtitle: "无需下载，千万资源随心取",
          img: "https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/pcDsc/dsc_1.png",
        },
        {
          title: "多样功能全覆盖",
          subtitle: "提问题 查法规 功能样样全 使用超便捷",
          img: "https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/pcDsc/dsc_2.png",
        },
        {
          title: "日常办公方便快捷",
          subtitle: "大视野，高信息密度、交互体验再升级",
          img: "https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/pcDsc/dsc_3.png",
        },
      ],
      video:
        "https://xzcs-video.oss-cn-beijing.aliyuncs.com/app/pcIntroduceVideo.mp4",
      showVideo: false,
      showPointsTips: false, //任务完成提示
      pointsObj: {}, //任务完成对象
    };
  },
  onLoad(e) {
    getUserAnalyze(2, 12, "/pages/pcDsc/index", "AM1", "PC端介绍页");
    this.completeQuest("B6");
  },
  methods: {
    //拷贝链接
    copyLink() {
      uni.setClipboardData({
        data: "www.xzcs2022.com",
        success: function () {
          uni.showToast({
            title: "复制成功",
            icon: "none",
          });
        },
      });
    },

    //播放视频
    playVideo() {
      this.showVideo = true;
    },
    close() {
      this.showVideo = false;
    },

    //完成任务
    completeQuest(code) {
      completeTask({ code }).then((res) => {
        if (res.code == 1) {
          setTimeout(() => {
            this.showPointsTips = true;
          }, 1000);
          this.pointsObj = res.data;
        }
      });
      setTimeout(() => {
        this.showPointsTips = false;
      }, 3000);
    },

    fullscreenchange(e) {
      if (!e.detail.fullScreen) {
        // 退出全屏，锁定竖屏
        this.showVideo = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  line-height: 1;
  background: #081c97;
  padding-bottom: 208rpx;

  .header {
    width: 100vw;
    height: 764rpx;
  }

  .video_icon {
    display: block;
    width: 680rpx;
    height: 313rpx;
    margin: 0 auto;
    margin-top: -200rpx;
  }

  .dsc {
    margin: 0 auto;
    margin-top: 95rpx;
    width: 680rpx;
    height: 100%;
    background: #e5f8fe;
    border-radius: 20rpx;
    position: relative;
    padding: 78rpx 32rpx 47rpx 32rpx;

    .dsc_header {
      width: 400rpx;
      height: 83rpx;
      background: #fed96e;
      border-radius: 99rpx;
      font-size: 40rpx;
      font-weight: 700;
      color: #dc640b;
      line-height: 83rpx;
      text-align: center;
      position: absolute;
      top: -42rpx;
      left: 50%;
      transform: translateX(-50%);
    }

    .dsc_content {
      font-size: 32rpx;
      color: #181f21;
      line-height: 54rpx;
      letter-spacing: 4rpx;
    }

    .dsc_list {
      margin-top: 40rpx;

      .dsc_item {
        display: flex;
        flex-direction: column;
        align-items: center;

        &:last-child {
          .item_img {
            margin-bottom: 0;
          }
        }

        .item_title {
          font-size: 43rpx;
          font-weight: 700;
          color: #004ebe;
          line-height: 54rpx;
          position: relative;
          z-index: 99;
          margin-bottom: 20rpx;

          &::after {
            content: "";
            display: block;
            width: 87rpx;
            height: 10rpx;
            background: #ff9b21;
            border-radius: 64rpx;
            position: absolute;
            bottom: 5rpx;
            left: 50%;
            transform: translateX(-50%);
            z-index: -1;
          }
        }

        .item_subtitle {
          font-size: 30rpx;
          color: #666666;
          line-height: 54rpx;
          margin-bottom: 12rpx;
        }

        .item_img {
          width: 593rpx;
          height: 385rpx;
          margin-bottom: 39rpx;
          border-radius: 17rpx;
        }
      }
    }
  }

  .dsc_footer {
    width: 680rpx;
    height: 104rpx;
    background: #ffffff;
    border-radius: 142rpx;
    border: 3rpx solid #7184ff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12rpx 0 42rpx;
    position: fixed;
    bottom: 50rpx;
    left: 35rpx;
    z-index: 100;

    .dsc_link {
      display: flex;
      align-items: center;
      font-size: 40rpx;
      color: #333333;

      .link_icon {
        width: 30rpx;
        height: 30rpx;
        margin-right: 13rpx;
      }
    }

    .copy_link {
      width: 200rpx;
      height: 86rpx;
      background: #1c87f3;
      border-radius: 142rpx;
      text-align: center;
      line-height: 86rpx;
      font-size: 32rpx;
      color: #ffffff;
    }
  }
}

.video {
  display: block;
  width: 750rpx;
  height: 500rpx;
}
</style>
